<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        button {
            display: block;
            margin: 10px 10px;
        }

        input,
        textarea {
            width: 200px;
        }

        #main {
            display: none;
        }
    </style>
</head>

<body>
    <div id="nickDom">
        <input type="text" id="username">
        <button onClick="setNick()">设置昵称</button>
    </div>

    <div id="main">

        <textarea id="input1" placeholder="发送消息框"></textarea>
        <div>
            <button onClick="sendMessageAll()">群发消息包括自己</button>

            <button onClick="sendMessageAllNoself()">群发给他人消息</button>

            <button onClick="getRoomList()">获取用户列表</button>
            


            <button onClick="joinRoom1()">房间1</button>
            

        </div>
    </div>


</body>
<script src="https://cdn.socket.io/4.1.2/socket.io.min.js"
    integrity="sha384-toS6mmwu70G0fw54EGlWWeA4z3dyJ+dlXBtSURSKN4vyRFOcxd3Bzjj/AoOwY+Rg" crossorigin="anonymous">
</script>
<script>
    let inputDom = document.querySelector('#input1')
    let socket = null;
    // 用户信息
    let userInfo = {
        nick: '',
    }


    // 用户设置昵称
    function setNick() {
        let nickDom = document.querySelector("#username");
        userInfo.nick = nickDom.value;
        // 展示聊天界面
        showChat();
    }
    // 显示 聊天界面  隐藏 昵称设置界面
    function showChat() {
        let chatDom = document.querySelector("#main");
        chatDom.style.display = "block";

        // 运行
        socket = io("ws://localhost:3000")

        socket.emit('addChat', userInfo.nick)

        socket.on('newUser', function (data) {
            console.log(data)
        })
        // 用户退出时 触发的事件
        socket.on('quitUser', function (data) {
            console.log(data)
        })

        // 聊天室的广播消息

        socket.on('MessageAll', function ({
            nick,
            message
        }) {
            console.log(nick, ':', message);
        })

        // 接收聊天室的广播消息， 不含自己

        socket.on('MessageAllNoself', function ({
            nick,
            message
        }) {
            console.log(nick, ':', message);
        })
        

        // 房间人数及名单
        socket.on('RoomList', function({roomMemmbers}) {
            console.log(roomMemmbers)
        })


    }
    // 群发消息 包括自己
    var sendMessageAll = function () {
        let inputVal = inputDom.value
        socket.emit('sendMessageAll', {
            nick: userInfo.nick,
            message: inputVal
        })
    }

    /**
     * 群发给他人消息
     * 
    */
   let sendMessageAllNoself = function () {
    let inputVal = inputDom.value
        socket.emit('sendMessageAllNoself', {
            nick: userInfo.nick,
            message: inputVal
        })
   }


        
        /**
         * 获取用户列表
         **/
        let getRoomList  = function() {
            socket.emit('getRoomList')
        } 
    

    // 创建 聊天房
    let joinRoom1 = () => {

        socket.emit('join', 'room1')
    }
</script>

</html>